<template>
  <el-card class="shop">
    <div slot="header" class="header">
      <span>店铺管理</span>
      <el-button
        v-if="isSave"
        type="success"
        size="mini"
        @click="
          handleSave();
          isSave = !isSave;
        "
        >保存</el-button
      >
      <el-button v-else size="mini" @click="isSave = !isSave">编辑</el-button>
    </div>
    <div class="content">
      <!-- form -->
      <el-form
        :model="form"
        size="small"
        label-width="100"
        class="form"
        :disabled="!isSave"
      >
        <!-- 店铺名称 -->
        <el-form-item prop="店铺名称">
          <el-input v-model="form.name" type="text"></el-input>
        </el-form-item>
        <!-- 店铺公告 -->
        <el-form-item prop="店铺公告">
          <el-input
            v-model="form.bulletin"
            :rows="8"
            type="textarea"
          ></el-input>
        </el-form-item>
        <!-- 店铺头像 -->
        <el-form-item prop="店铺头像">
          <el-upload
            class="avatar-uploader"
            :action="API + '/shop/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="form.avatar"
              :src="API + '/upload/shop/' + form.avatar"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 店铺图片 -->
        <el-form-item>
          <el-upload
            :action="API + '/shop/upload'"
            list-type="picture-card"
            :file-list="form.pics"
            :on-success="handleShopSuccess"
            :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <!-- 配送费 -->
        <el-form-item>
          <el-input-number
            v-model="form.deliveryPrice"
            :min="1"
            :max="100"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <!-- 配送时间 -->
        <el-form-item>
          <el-input-number
            v-model="form.deliveryTime"
            :min="1"
            :max="100"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <!-- 配送描述 -->
        <el-form-item prop="配送描述">
          <el-input v-model="form.description" type="text"></el-input>
        </el-form-item>
        <!-- 店铺评分 -->
        <el-form-item prop="店铺评分">
          <el-rate v-model="form.score"></el-rate>
        </el-form-item>
        <!-- 销量 -->
        <el-form-item>
          <el-input-number
            v-model="form.sellCount"
            :min="1"
            :max="10000"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <!-- 活动 -->
        <el-form-item>
          <el-checkbox-group v-model="form.supports">
            <el-checkbox label="在线支付满28减5"></el-checkbox>
            <el-checkbox label="VC无限橙果汁全场8折"></el-checkbox>
            <el-checkbox label="单人精彩套餐"></el-checkbox>
            <el-checkbox label="特价饮品8折抢购"></el-checkbox>
            <el-checkbox label="单人特色套餐"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 营业时间 -->
        <el-form-item>
          <el-time-picker
            value-format="HH:mm:ss"
            is-range
            v-model="form.date"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import { shopInfo, shopEdit } from '@/api/shop'
export default {
  data () {
    return {
      API: 'http://localhost:5000',
      isSave: false, //是否保存
      //form数据
      form: {
        id: '',
        name: '',
        bulletin: '',
        avatar: '',
        deliveryPrice: '',
        deliveryTime: '',
        description: '',
        score: 0,
        sellCount: '',
        supports: '',
        pics: [],
        date: [],
        minPrice: ''
      },
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    //获取数据
    async getData () {
      let res = await shopInfo()
      let { data } = res.data
      //处理数据
      let arr = data.pics.map((v) => {
        return {
          name: v,
          url: this.API + '/upload/shop/' + v
        }
      })
      data.pics = arr
      this.form = data
    },
    //保存按钮
    async handleSave () {
      //处理数据
      let pics = this.form.pics.map((v) => {
        return v.name
      })
      let res = await shopEdit({ ...this.form, pics })
    },
    //删除图片
    handleRemove (file, fileList) {
      //处理数据 回填form
      this.form.pics = fileList.map((v) => {
        return {
          name: v.name,
          url: v.url
        }
      })
    },
    //预览图片
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    //多图上传成功回调
    handleShopSuccess (res) {
      let { code, imgUrl, msg } = res
      if (code === 0) {
        this.$message({
          type: 'success',
          message: msg
        })
        //数据回填form
        //高级用法
        this.form.pics = [
          ...this.form.pics,
          {
            name: imgUrl.substr(imgUrl.lastIndexOf('/') + 1),
            url: this.API + imgUrl
          }
        ]
      }
    },
    //上传成功触发函数
    handleAvatarSuccess (res, file) {
      //res 就是后台响应的数据 file一个对象包含图片信息和后端响应数据等等
      let { code, msg, imgUrl } = res
      if (code === 0) {
        this.$message({
          type: 'success',
          message: msg
        })
        //处理数据
        this.form.avatar = imgUrl.substr(imgUrl.lastIndexOf('/') + 1)
      } else {
        this.$message.error(msg)
      }
    },
    //上传之前触发函数， 作用是限制图片大小和格式
    beforeAvatarUpload (file) {
      //判断图片格式
      const isJPG = /[jpeg|png]/.test(file.type)
      //判断图片大小
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.avatar-uploader {
  margin: 20px 0;
}
.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.form {
  width: 300px;
}
/deep/.el-upload-list--picture-card {
  display: flex;
  flex-wrap: wrap;
}

/deep/.el-upload-list {
  width: 400px;
}
</style>
